var KeFuClientUI = (function () {

	var msgTpl = '<li id="k<%=id%>" class="msgLi<%if(type == 1){%> msgRt<%}%>"><div class="mLabel"><span class="triangle"></span><div class="mHead"><strong class="mTit" data-user="<%=username%>"><%if(type == 1){%>我<%} else {%><%=username%><%}%></strong><span class="mTime"><%=time%></span></div><div class="mContent"><%=message%></div></div></li>';
	var sysMsgTpl = '<li id="k<%=id%>" class="msgLi sysMsgLi"><div class="mLabel"><span class="triangle"></span><div class="mHead"><strong class="mTit"><%=title%></strong><span class="mTime"><%=time%></span></div><div class="mContent"><%=message%></div></div></li>';

	var manualListTpl = '<li id="manualLi" class="msgLi sysMsgLi">';
	manualListTpl += '<div class="mLabel"><span class="triangle"></span><div class="defMsg"><%=default_message%><div><ul class="groupUL">';
	manualListTpl += '<%_.each(group_info, function(item) {%>';
	manualListTpl += '<li class="gLI<% if(item.online_number == 0) {%> noOL<%};%>"><a href="javascript:;" class="gLnk js-connectGroup" data-group="<%=item.group_id%>"><%=item.group_name%>( <span class="num"><%=item.online_number%> </span>人在线 )</a></li>';
	manualListTpl += '<%});%>';
	manualListTpl += '<ul>';
	manualListTpl += '</div></li>';

	function Module() {
		this.$widget = null; // 客服客户端的界面对象
		this.$layer = null; // 加载聊天界面的层
		this.$msgInput = null;
		this.$msgList = null;
	}

	// 获取用户输入的消息内容
	Module.prototype.getMessage = function (emoArr) {
		var msg = this.$msgInput.val();
		if(emoArr != null) {
			var patt = new RegExp("\\[.*?\\]","g");
			var mth = msg.match(patt);
			if(mth && mth.length > 0) {
				$.each(mth, function(k, v) {
					var pt = new RegExp("\\[.*?:([0-9]+)\\]","g");
					var res = pt.exec(v);
					var pos = res[1];
					if(pos) {
						pos = pos - 1;
						var emoObj = emoArr[pos];
						var url = emoObj.url;
						if(url) {
							var img = '<img src="'+url+'" title="'+emoObj.value+'" />';
							msg = msg.replace(v, img);
						}
					}
				});
			}
		}
		return msg;
	};

	Module.prototype.clearMessageInput = function () {
		this.$msgInput.val('');
	};

	// 将接收及发送的消息显示到客户端
	Module.prototype.setMessage = function (jo, myId) {
		var me = this;
		if (jo) {
			var compiled = _.template(msgTpl);
			if (jo.from === myId) { // 发送
				jo.type = 1;
				var ml = compiled(jo);
				me.$msgList.append(ml);
				me.clearMessageInput();
			} else { // 接收
				jo.type = 2;
				var ml = compiled(jo);
				me.$msgList.append(ml);
			}
			me.messageListScrollToBottom();
		}
	};

	// 显示系统消息
	Module.prototype.setSysMessage = function (jo) {
		var me = this;
		if (jo) {
			var compiled = _.template(sysMsgTpl);
			var ml = compiled(jo);
			me.$msgList.append(ml);
		}
	};

	// 清空消息列表
	Module.prototype.clearMessageList = function () {
		var me = this;
		me.$msgList.html('');
	};

	// 将消息列表的滚动条，滚动到最下方。
	Module.prototype.messageListScrollToBottom = function () {
		this.$msgList[0].scrollTop = this.$msgList[0].scrollHeight;
	};

	// 显示手动选择客服的列表
	Module.prototype.showManualList = function (obj) {
		var me = this;
		if (obj) {
			var compiled = _.template(manualListTpl);
			var ml = compiled(obj);
			me.$msgList.html(ml);
		}
	};

	// 绑定连接
	Module.prototype.bindConnectGroup = function (fn) {
		var me = this;
		me.$msgList.on('click', '.js-connectGroup', function () {
			var $this = $(this);
			var groupId = $this.data('group');
			fn && fn.call(this, groupId);
		});
	};

	return Module;
})();